<template>
  <div>
    <div class="Rating-gray">
      <i class="fa" v-for="(item,index) in itemClasses" :key="index" :class="item"></i>
    </div>
  </div>
</template>

<script>
// 星星的长度
const LENGTH = 5;
// 星星对应的class
// 整颗星
const CLS_ON = "fa-star";
// 空的星星
const CLS_HALF = "fa-star-half-empty";
// 半星
const CLS_OFF = "fa-star-o";
export default {
  name: "rating",
  props: {
    rating: Number,
  },
  data() {
    return {};
  },
  computed: {
    itemClasses() {
      // 4.8 四个全星 一个半星
      let result = [];
      let score = Math.floor(this.rating * 2) / 2;
      //   4.5除以1的余数不等于0的时候,那么就是半颗星
      let half = score % 1 !== 0;
      let allStar = Math.floor(score);
      for (let i = 0; i < allStar; i++) {
        result.push(CLS_ON);
      }
      // 半星
      if (half) {
        result.push(CLS_HALF);
      }
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      return result;
    },
  },
};
</script>

<style scoped>
.Rating-gray {
  color: rgb(237, 237, 33);
}
</style>